/*
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-10 19:08:33
 */
import MyTable from "@/components/myTable/MyTable";
import { IColumn } from "@/components/myTable/types";
import SvgIcon from "@/components/SvgIcon/SvgIcon";
import { usePlay } from "@/hooks/play/usePlay";
import { useSong } from "@/hooks/song/useSong";
import { getDailyRecommendSong } from "@/service/api/songList/songList";
import { allArray, IAllObject } from "@/types/base";
import { render } from "nprogress";
import React, { memo, useEffect, useState } from "react";
import "./style/dailySong.scss";

interface IDailySongsProps {}
const today = new Date().getDate();
const { getSongName, getSingers, getSongTime } = useSong();

const DailySongs: React.FC<IDailySongsProps> = memo((props) => {
  const { playState, playMusic } = usePlay();
  const [songs, setSongs] = useState<allArray>([]);
  // 点击歌曲名称,播放音乐
  const titleClick = (row: IAllObject) => {
    if (playState.songId === row.id) return;
    playMusic(row.id);
  };
  const columns: IColumn[] = [
    {
      label: "标题",
      prop: "name",
      width: "120",
      flex: 5,
      class: "text-main-text-color",
      dbClick: titleClick,
    },
    {
      label: "歌手",
      prop: "singer",
      flex: 2,
    },
    {
      label: "专辑",
      prop: "album",
      flex: 3,
    },
    {
      label: "时长",
      prop: "time",
      flex: 1,
    },
  ];

  useEffect(() => {
    (async () => {
      const {
        data: { dailySongs, recommendReasons },
      } = await getDailyRecommendSong();
      setSongs(dailySongs);
    })();
  }, []);
  return (
    <div className="dailySongs">
      <div className="header">
        <div className="header-top flex-c">
          <div className="relative today flex-c-c">
            <SvgIcon name="calendar" size={80} className="trans fill-theme" />
            <span className="absolute top-6 trans">{today}</span>
          </div>
          <div className="ml-5 message flex-col-c-b">
            <div className="text-xl font-bold trans text-main-text-color">
              每日歌曲推荐
            </div>
            <div className="mt-1 text-sm text-sub-text-color">
              根据你的音乐口味生成, 每天6：00更新
            </div>
          </div>
        </div>
        <div className="header-bottom">123</div>
      </div>
      <MyTable
        tableData={songs}
        columns={columns}
        name={(scope: any) => {
          return (
            <span
              className="cursor-pointer"
              dangerouslySetInnerHTML={{
                __html: getSongName(scope.name, scope.alia),
              }}
            ></span>
          );
        }}
        singer={(scope: any) => getSingers(scope.ar)}
        album={(scope: any) => scope.al.name}
        time={(scope: any) => getSongTime(scope.dt)}
      ></MyTable>
    </div>
  );
});

export default DailySongs;
